<script setup lang="ts">
import { SizebarContainer } from "@/models/containers";
import Dynamic from "@/components/Dynamic.vue";
import { ref } from "vue";

const props = defineProps<{ model: SizebarContainer }>()

const opened = ref(false)
function onMarkClick() {
    opened.value = true
}

</script>

<template>
    <div class="pybi-sizebar" data-pybi-auto-width>

        <Teleport to="body">
            <span v-show="!opened" class="pybi-sizebar_land-mark" @click="onMarkClick">«</span>
        </Teleport>


        <el-drawer v-model="opened" :with-header="false" v-bind="model.props">
            <div class="content">
                <Dynamic :component="cp" v-for="cp in props.model.children" :key="cp.id"></Dynamic>

            </div>
        </el-drawer>


    </div>
</template>

<style scoped lang="less">
.pybi-sizebar_land-mark {
    position: absolute;
    font-weight: 900;

    width: 2em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;

    top: 1em;
    right: 1em;
    z-index: 9999;

    // border: 1px solid #000;
    padding: 0.3em;
    border-radius: 50%;
    cursor: pointer;

    &:hover {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        /* 浅灰色的阴影 */
        transition: 0.3s;
        /* 添加过渡效果 */
    }
}



.pybi-sizebar {
    position: relative;

    .content {

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        overflow: auto;
        gap: 0.8em;
    }


}
</style>